import path from "path";
import viteAlias from "./plugins/vite-alias";
import vitePluginHtml from "./plugins/vite-plugin-html";
import { createHtmlPlugin } from "vite-plugin-html";
import { checker } from "vite-plugin-checker";
const postcssPresetEnv = require("postcss-preset-env");

/**
 * @type import("vite").UserConfig
 */
const config = {
  optimizeDeps: {
    exclude: [], // 不进行依赖预构建的项目
  },
  envPrefix: "PREFIX_", // 环境变量前缀
  css: {
    modules: {
      localsConvention: "camelCaseOnly", // 该配置表示编译后的key的显示形式(小驼峰)
      scopeBehaviour: "local", //模块化/全局化
      globalModulePaths: ["./src/components/componentB/componentB.module.less"], // 表示不参与css 模块化
      generateScopedName: (name, fileName, css) => {
        return `${name}_${
          fileName.split("/")[fileName.split("/").length - 1].split(".")[0]
        }`;
      }, //生成的class名以何种方式显示，具体配置 github-postcss
      hashPrefix: "tangqiang", // 配置混合到 最终的hash生成中
    },
    preprocessorOptions: {
      less: {
        // 整个配置最终会给到less 的执行参数中去 (执行参数 在less 官网的options 里面)
        additionalData: `@import "${path.resolve(__dirname, 'src/assets/global.less')}";`,
        math: "always", // 表示 编译小括号
      },
    },
    devSourcemap: true, //开启该配置则会 对编译生成的样式和源文件做一个索引(可以在控制台看到源文件)
    postcss: {
      plugins: [
        postcssPresetEnv({
          importFrom: path.resolve(__dirname, "./src/assets/variable.css"),
        }),
      ],
    },
  },
  build: {
    rollupOptions: {
      output: {
        assetFileNames: "[hash].[name].[ext]", //配置打包静态资源后的名字
      },
    },
    outDir: "viteDist", //配置打包后的文件名
    assetsInlineLimit: 4096, //配置打包后base64最大转换单位，小于4kb转换为base64
    assetsDir: "static", // 配置静态资源目录
    emptyOutDir: true, // 默认为true 该配置表示每次build命令后都会删除dist下的东西从新打包
  },
  // resolve: {
  //   alias: {
  //     "@": path.resolve(__dirname, "./src/"),
  //     "@assets": path.resolve(__dirname, "./src/assets/")
  //   }
  // },
  plugins: [
    viteAlias({
      prefix: "@",
      basePath: "../src",
    }),
    vitePluginHtml({
      inject:{
        data:{
          title:"vite-customer-title"
        }
      }
    }),
    checker({
      typescript:true
    })
    // createHtmlPlugin({ // 服务端动态渲染 ejs模板语法
    //   inject:{
    //     data:{
    //       title:"vite-space"
    //     }
    //   }
    // })
  ],
};
export default config;
